<template>
  <div class="ner-1" @click="kpadd(items)">
    <img :src="items?.imgUrl ? items?.imgUrl : defaultCover" class="tups-1" />
    <div class="wenzis-1">{{ items.kcmc }}</div>
    <div class="xinm-1">
      <img src="../img/ic_te.png" class="icons-2" />
      {{ items.ghNames }}
    </div>
    <div class="icons-1" v-if="items.isAicourse"></div>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router'
import defaultCover from '../img/defaultCover.png'
const props = defineProps<{
  items?: any
}>()
const router = useRouter()
const emits = defineEmits<{
  (e: 'kpadd', item: any): void
}>()
const kpadd = (item: any) => {
  emits('kpadd', item)
}
</script>

<style lang="scss" scoped>
.ner-1 {
  position: relative;
  margin-right: 18px;
  margin-bottom: 20px;
  width: 312px;
  height: 262px;
  padding: 16px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid #e6ebf0;
  cursor: pointer;
  &:hover {
    box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, 0.1);
  }
}
.icons-1 {
  width: 24px;
  height: 40px;
  position: absolute;
  top: 0;
  right: 20px;
  z-index: 99;
  background: url('../img/tag_AI.png');
  background-size: cover;
  background-position: center;
}
.tups-1 {
  width: 280px;
  height: 146px;
}
.wenzis-1 {
  width: 112px;
  height: 22px;
  margin: 16px 0 24px 0;
  font-family:
    PingFang SC,
    PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #18191a;
}
.icons-2 {
  width: 16px;
  height: 16px;
  margin-right: 4px;
}
.xinm-1 {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #696e76;
}
</style>
